Day27 網站實作與修改

2024 iThome 鐵人賽

DAY 27

佛心分享-IT 人自學之術

原來程式語言一點都不難！跟著我30天java自學之路系列第 27 篇

16th鐵人賽

tomato5678

2024-10-11 02:07:34

120 瀏覽

分享至

昨天都把css差不多寫完了，那今天先回到html的補充與修改吧。

更改網站語言

因為我覺得網站中的英文看了肯定沒有中文直覺，所以第一步我想把它改成中文網站，看起來也會比較容易懂與親切。
把中文改成英文的代碼也不困難，以下就是他的改法。
< html lang="en" > 改成中文，只需要將 lang="en" 改成 lang="zh", 這樣瀏覽器會知道這個頁面主要使用的是中文

<html lang="zh">

詳細一點想改成繁體中文能寫成這樣

<html lang="zh-TW">

所以結果會變成

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生物複製</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>生物複製：了解科學原理</h1>
    </header>

    <section id="introduction">
        <h2>什麼是複製？</h2>
        <p>複製是指產生基因上完全相同的個體的過程。它在自然界中發生在單細胞生物中，也可以通過人工技術來實現。</p>
        <button id="learnMoreBtn">了解更多</button>
    </section>

    <section id="example">
        <h2>著名的複製例子：多莉羊</h2>
        <p>多莉羊是第一隻通過成體細胞複製的哺乳動物，於 1996 年出生。她的誕生開啟了複製研究的大門。</p>
        <img src="dolly-sheep.jpg" alt="多莉羊" id="dollyImage">
    </section>

    <footer>
        <p>&copy; 2024 生物複製</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

網站敘述補充

我後來又加上了些詳細的網站文字敘述，這是後來改變

<section id="example">
        <h2>桃莉羊</h2>
        <p>1996 年出生，世界上第一隻體細胞複製動物──桃莉羊誕生了。
            她的誕生開啟了複製研究的大門，英國的羅斯林研究所取出一頭母羊的乳腺細胞核，
            將它移植到事先摘除了細胞核的受精卵中，利用化學方法刺激受精卵發育後，
            再放入另一頭母羊的子宮，使其發育成小羊，成功產下了桃莉</p>
        <img src="images/dolly.jpg" alt="多莉羊" id="dollyImage">
    </section>